<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>合同明细模板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .layuimini-form .layui-form-label {
            width: 120px;
        }
        
        /* 添加整齐的表单布局样式 */
        .layui-form-item .layui-inline {
            margin-right: 0;
            margin-bottom: 10px;
        }
        
        .layui-form-item .layui-input-inline {
            width: 220px;
            margin-right: 10px;
        }
        
        /* 明细字段区域样式调整 */
        .detail-section {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #e6e6e6;
            border-radius: 4px;
        }
        
        .detail-section legend {
            width: auto;
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: bold;
        }
        
        /* 禁用输入框样式 */
        input:disabled, select:disabled, textarea:disabled {
            background-color: #f5f5f5;
            color: #333;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        
        <fieldset class="table-search-fieldset">
            <legend>合同明细信息</legend>
            <div style="margin: 3px 3px 3px 3px">
                <form class="layui-form layuimini-form" action="">
                    <input type="text" name="contractDetailId" id="contractDetailId" style="display: none" class="layui-input">
                    <input type="text" name="contractInnerId" id="contractInnerId" style="display: none" class="layui-input">
                    <input type="text" name="relatedOrderDetailId" id="relatedOrderDetailId" style="display: none" class="layui-input">
                    
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">产品ID</label>
                            <div class="layui-input-inline">
                                <input type="number" name="prodId" id="prodId" value="" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">产品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="productName" id="productName" value="" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">产品规格</label>
                            <div class="layui-input-inline">
                                <input type="text" name="productSpec" id="productSpec" value="" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">分期批次号</label>
                            <div class="layui-input-inline">
                                <input type="number" name="installmentNo" id="installmentNo" value="1" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">本批次预计交货日期</label>
                            <div class="layui-input-inline">
                                <input readonly="readonly" type="text" class="layui-input" name="installmentExpectedDate" id="installmentExpectedDate" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">本批次数量</label>
                            <div class="layui-input-inline">
                                <input type="number" name="installmentQuantity" id="installmentQuantity" value="0" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">本批次占比(%)</label>
                            <div class="layui-input-inline">
                                <input type="number" name="installmentRatio" id="installmentRatio" value="100.00" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">总数量</label>
                            <div class="layui-input-inline">
                                <input type="number" name="quantity" id="quantity" value="0" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">单位</label>
                            <div class="layui-input-inline">
                                <input type="text" name="unit" id="unit" value="" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">单价</label>
                            <div class="layui-input-inline">
                                <input type="number" name="unitPrice" id="unitPrice" value="0.00" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">分项金额</label>
                            <div class="layui-input-inline">
                                <input type="number" name="subtotalAmount" id="subtotalAmount" value="0.00" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">不含税单价</label>
                            <div class="layui-input-inline">
                                <input type="number" name="taxFreeUnitPrice" id="taxFreeUnitPrice" value="0.00" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">不含税金额</label>
                            <div class="layui-input-inline">
                                <input type="number" name="taxFreeAmount" id="taxFreeAmount" value="0.00" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">税率</label>
                            <div class="layui-input-inline">
                                <input type="number" name="taxRate" id="taxRate" value="13.00" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">增值税金额</label>
                            <div class="layui-input-inline">
                                <input type="number" name="taxAmount" id="taxAmount" value="0.00" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">本批次提货期限开始</label>
                            <div class="layui-input-inline">
                                <input readonly="readonly" type="text" class="layui-input" name="pickupPeriodStart" id="pickupPeriodStart" disabled>
                            </div>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">本批次提货期限结束</label>
                            <div class="layui-input-inline">
                                <input readonly="readonly" type="text" class="layui-input" name="pickupPeriodEnd" id="pickupPeriodEnd" disabled>
                            </div>
                        </div>
                    </div>
                    
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">交期条款</label>
                        <div class="layui-input-block">
                            <textarea name="deliveryTerms" id="deliveryTerms" value="" autocomplete="off" class="layui-textarea" disabled></textarea>
                        </div>
                    </div>
                    
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea name="remark" id="remark" value="" autocomplete="off" class="layui-textarea" disabled></textarea>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-primary" onclick="parent.layer.closeAll();">关闭</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
    </div>
</div>

<script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="/static/js/common.js"></script>
<script>
    var lay, form, laydate;
    layui.use(['form', 'laydate'], function () {
        lay = layui.jquery;
        form = layui.form;
        laydate = layui.laydate;

        // 初始化日期选择器
        laydate.render({
            elem: '#installmentExpectedDate',
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        laydate.render({
            elem: '#pickupPeriodStart',
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        laydate.render({
            elem: '#pickupPeriodEnd',
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        // 检查URL参数，加载明细数据
        var urlParams = new URLSearchParams(window.location.search);
        var detailId = urlParams.get('detailId');
        var contractId = urlParams.get('contractId');
        var orderDetailId = urlParams.get('orderDetailId');
        
        if (detailId) {
            loadDetailData(detailId);
        } else if (orderDetailId) {
            // 基于订单明细创建合同明细
            loadOrderDetailData(orderDetailId);
        } else if (contractId) {
            // 新建明细，设置合同ID
            $('#contractInnerId').val(contractId);
        }
    });

    // 加载明细数据
    function loadDetailData(detailId) {
        $.xAjax('/purchaseContract/getDetailById/' + detailId, 'GET', '', {
            onSuccess: function(result) {
                if (result.code == 0) {
                    var detailData = result.data;
                    fillDetailTemplate(detailData);
                } else {
                    $.common.showErrorMessage(result.message);
                }
            }
        });
    }

    // 加载订单明细数据
    function loadOrderDetailData(orderDetailId) {
        $.xAjax('/purchaseOrder/getOrderDetailById/' + orderDetailId, 'GET', '', {
            onSuccess: function(result) {
                if (result.code == 0) {
                    var orderDetailData = result.data;
                    fillDetailTemplateFromOrder(orderDetailData);
                } else {
                    $.common.showErrorMessage(result.message);
                }
            }
        });
    }

    // 从订单明细数据填充合同明细模板
    function fillDetailTemplateFromOrder(orderDetailData) {
        // 设置关联的订单明细ID
        $('#relatedOrderDetailId').val(orderDetailData.purchaseOrderDetailId);
        
        // 填充产品信息
        $('#prodId').val(orderDetailData.prodId);
        $('#productName').val(orderDetailData.productName || '');
        $('#productSpec').val(orderDetailData.productSpec || '');
        
        // 填充数量价格信息
        $('#quantity').val(orderDetailData.quantity || 0);
        $('#unit').val(orderDetailData.unit || '');
        $('#unitPrice').val(orderDetailData.unitPrice || 0.00);
        $('#subtotalAmount').val(orderDetailData.totalAmount || 0.00);
        $('#taxFreeUnitPrice').val(orderDetailData.taxFreeUnitPrice || 0.00);
        $('#taxFreeAmount').val(orderDetailData.taxFreeAmount || 0.00);
        $('#taxRate').val(orderDetailData.taxRate || 13.00);
        $('#taxAmount').val(orderDetailData.taxAmount || 0.00);
        
        // 填充交付信息
        $('#deliveryTerms').val(orderDetailData.deliveryTerms || '');
        $('#pickupPeriodStart').val(layui.util.toDateString(orderDetailData.pickupPeriodStart, 'yyyy-MM-dd'));
        $('#pickupPeriodEnd').val(layui.util.toDateString(orderDetailData.pickupPeriodEnd, 'yyyy-MM-dd'));
        
        // 填充分期信息（默认为第1期，占比100%）
        $('#installmentNo').val(1);
        $('#installmentQuantity').val(orderDetailData.quantity || 0);
        $('#installmentRatio').val(100.00);
        $('#installmentExpectedDate').val(layui.util.toDateString(orderDetailData.deliveryDate, 'yyyy-MM-dd'));
        
        // 填充备注
        $('#remark').val(orderDetailData.remark || '');
        
        form.render();
    }

    // 填充明细模板数据
    function fillDetailTemplate(detailData) {
        for (let key in detailData) {
            if (detailData[key] !== null && detailData[key] !== undefined) {
                $('#' + key).val(detailData[key]);
            }
        }
        form.render();
    }
</script>

</body>
</html>
